<!-- ModalDialog.vue -->
<template>
  <div v-if="showModal" class="modal-mask">
    <div class="modal-wrapper">
      <div class="modal-container">
        <div class="modal-header">
          <slot name="header">默认标题</slot>
        </div>
        <div class="modal-body">
          <slot name="body">这里是模态框的内容...</slot>
        </div>
        <div class="modal-footer">
          <button class="modal-default-button" @click="closeModal">关闭</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["showModal"],
  methods: {
    closeModal() {
      this.$emit("close");
    },
  },
};
</script>

<style scoped>
/* 在这里添加模态框的CSS样式 */
.modal-mask {
  /* ... */
}
/* ... */
</style>